<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #left {
            width: 300px;
            height: 300px;
            position: relative;
        }

        #left img {
            width: 300px;
            height: 300px;
        }

        #right {
            width: 500px;
            height: 500px;
            display: none;
            position: absolute;
            border: 1px solid #eee;
            background: url(./images/big1.jpg) center;
        }

        .shadow {
            width: 140px;
            height: 140px;
            position: absolute;
            cursor: move;
            background: rgba(255, 255, 0, 0.349);
            display: none;
        }

        .side {
            margin: 50px;
            width: 300px;
            border: 1px solid red;
        }

        .indexes {
            display: flex;
            justify-content: space-between;
            padding: 5px;
        }

        .indexes li {
            width: 70px;
            height: 70px;
        }

        .indexes li.active {
            box-shadow: 0 0 2px red;
        }
    </style>
</head>

<body>
    <div class="side">
        <div id="left">
            <div class="shadow"></div>
            <img src="./images/middle1.jpg" id="img">
        </div>
        <ul class="indexes">
            <li class="active">
                <img src="./images/small1.jpg" alt="">
            </li>
            <li>
                <img src="./images/small2.jpg" alt="">
            </li>
            <li>
                <img src="./images/small3.jpg" alt="">
            </li>
            <li>
                <img src="./images/small4.jpg" alt="">
            </li>
        </ul>
    </div>
    <div id="right"></div>
    <script>
        let shadow = document.querySelector('.shadow')
        let left = document.querySelector('#left')
        let right = document.querySelector('#right')
        right.style.top = left.offsetTop + 'px'
        right.style.left = left.offsetLeft + left.offsetWidth + 10 + 'px'


        let imgs = [
            { small: 'small1.jpg', middle: 'middle1.jpg', large: 'big1.jpg' },
            { small: 'small2.jpg', middle: 'middle2.jpg', large: 'big2.jpg' },
            { small: 'small3.jpg', middle: 'middle3.jpg', large: 'big3.jpg' },
            { small: 'small4.jpg', middle: 'middle4.jpg', large: 'big4.jpg' }
        ]


        let indexes = document.querySelectorAll('.indexes li')
        let img = document.querySelector('#img')

        for (let i = 0; i < indexes.length; i++) {
            indexes[i].onmouseenter = function () {
                //换中图
                img.src = './images/' + imgs[i].middle
                //换大图
                right.style.backgroundImage = `url(./images/${imgs[i].large})`
                //自身高亮
                document.querySelector('.indexes li.active').classList.remove('active')
                indexes[i].classList.add('active')
            }
        }



        left.onmousemove = function (e) {
            let offsetX = e.pageX - left.offsetLeft
            let offsetY = e.pageY - left.offsetTop
            let percent_x = (offsetX / left.offsetWidth) * 100 + '%'
            let percent_y = (offsetY / left.offsetHeight) * 100 + '%'
            right.style.backgroundPosition = `${percent_x} ${percent_y}`
            //shadow
            let x = offsetX - shadow.offsetWidth / 2
            let y = offsetY - shadow.offsetHeight / 2
            if (x < 0) x = 0
            if (y < 0) y = 0
            let maxLeft = left.offsetWidth - shadow.offsetWidth
            let maxTop = left.offsetHeight - shadow.offsetHeight
            if (x > maxLeft) x = maxLeft
            if (y > maxTop) y = maxTop
            shadow.style.left = x + 'px'
            shadow.style.top = y + "px"
        }

        left.onmouseover = function () {
            shadow.style.display = 'block'
            right.style.display = 'block'
        }

        left.onmouseout = function () {
            right.style.display = 'none'
            shadow.style.display = 'none'
        }
    </script>
</body>

</html>